<template>
  <div class="home card">
    <div class="top">
      <el-card>
        <div class="toponebox">
          <div class="toptitle">
            <div>
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            </div>
            <div class='name'>
              张三
            </div>
          </div>
          <div class="topinfo">
            <el-row class="row-with-margin">
              <el-col :span="4">
                <span>性别</span> <span>123</span>
              </el-col>
              <el-col :span="4">
                <span>年龄</span> <span>123</span>
              </el-col>
              <el-col :span="4">
                <span>电话:</span> <span>123</span>
              </el-col>
              <el-col :span="4">
                <span>管理医生:</span> <span>123</span>
              </el-col>

              <el-col :span="4">
                <span>MCC编号:</span> <span>123</span>
              </el-col>

              <el-col :span="4">
                <span>质控状态:</span> <span>123</span>
              </el-col>
            </el-row>
            <el-row>
            
              <el-col :span="4">
                <span>质控状态:</span> <span>123</span>
              </el-col>
              <el-col :span="4">
                <span>加入管理时间:</span> <span>123</span>
              </el-col>
              <el-col :span="4">
                <span>上次就诊时间:</span> <span>123</span>
              </el-col>
              <el-col :span="4">
                <span>基线时间:</span> <span>123</span>
              </el-col>
              <el-col :span="4">
                <span>糖化:</span> <span>123</span>
              </el-col>
              <el-col :span="4">
                <span>最近FGP:</span> <span>123</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>
    </div>
    <div class="contentbox">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <Baseinfo />
        </el-tab-pane>
        <el-tab-pane label="检查信息" name="second">
          <Jzinfo />
        </el-tab-pane>
        <el-tab-pane label="化验信息" name="third">
          <Hyxx />
        </el-tab-pane>
        <el-tab-pane label="处方信息" name="fourth">
          <Cfxx/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import Baseinfo from '@/views/hzinfo/baseinfo.vue'
import Hyxx from '@/views/hzinfo/hyxx.vue'
import Jzinfo from '@/views/hzinfo/jzinfo.vue'
import Cfxx from '@/views/hzinfo/cfxx.vue'
const activeName = ref('first')

const handleClick = (tab, event) => {
  console.log(tab, event)
}
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;

  .top {
    .toponebox {
      display: flex;
    }

    .toptitle {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 10%;
      border-right: 1px solid #f0f0f0;

      .name {
        font-size: 14px;
      }
    }

    .topinfo {
      flex: 1;
      color: #9a9b9d;
      font-size: 15px;
      margin-left: 1%;

      .row-with-margin {
        margin-bottom: 20px;
        /* 设置行间距 */
      }
    }
  }

  .contentbox {
    width: 100%;
    height: 300px;
  }
}
</style>